<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <a-row :gutter="10">
    <a-col :md="6" :sm="24">
      <a-card :bordered="true" title="报价单模板分类">
        <!-- 按钮操作区域 -->
        <a-row style="margin-left: 14px">
          <a-button  @click="handleAdd()" type="primary">添加</a-button>
          <a-button  @click="handleEdit()" type="default">编辑</a-button>
          <a-button  @click="deleteCategory()" type="default">删除</a-button>
          <a-button @click="refresh" type="default" icon="reload">刷新</a-button>
        </a-row>
        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
          <!-- 树-->
<!--          <a-col :md="10" :sm="24">-->
<!--            <template>-->
<!--              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">-->
<!--               <span style="user-select: none">-->
                <a-tree
                  :key="treeKey"
                  @select="onSelect"
                  :treeData="categoryTree"
                  :defaultExpandAll="true"/>
<!--                </span>-->
<!--              </a-dropdown>-->
<!--            </template>-->
<!--          </a-col>-->
        </div>
      </a-card>
    </a-col>
    <a-col :md="18" :sm="24">
      <a-row>
        <a-card :bordered="true" :title="'报价单模板: ['+this.currSelected.name+']'">
          <QuoteTemplateTable ref="quoteTemplateTable" ></QuoteTemplateTable>
        </a-card>
      </a-row>
    </a-col>
    <quote-category-modal ref="quoteCategoryModal" @ok="refresh"></quote-category-modal>
  </a-row>
</template>

<script>
import {
  queryQuoteCategoryTreeList,
  checkOrganization,
  queryQuoteCategoryInfo
} from '@/api/api'
import { postAction } from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import QuoteCategoryModal from '@views/quote/modules/QuoteCategoryModal.vue'
import QuoteTemplateTable from '@views/quote/modules/QuoteTemplateTable.vue'
export default {
  name: 'QuoteTemplate',
  mixins: [JeecgListMixin],
  components: {
    QuoteTemplateTable,
    QuoteCategoryModal
  },
  data() {
    return {
      treeKey: 0,       // 动态 key，初始值
      iExpandedKeys: [],
      loading: false,
      currFlowId: '',
      currFlowName: '',
      disable: true,
      treeData: [],
      visible: false,
      categoryTree: [],
      rightClickSelectedKey: '',
      rightClickSelectedOrgCode: '',
      hiding: true,
      model: {},
      dropTrigger: '',
      depart: {},
      disableSubmit: false,
      checkedKeys: [],
      selectedKeys: [],
      autoIncr: 1,
      currSelected: {},
      allTreeKeys:[],
      checkStrictly: true,
      form: this.$form.createForm(this),
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      graphDatasource: {
        nodes: [],
        edges: []
      },
      validatorRules: {
        orgAbr: {
          rules: [
            { required: true, message: '请输入名称!'},
            { validator: this.validateName}
          ]
        },
        orgNo: {rules: [{required: true, message: '请输入编码!'}]}
      },
      url: {
        delete: '/quote/category/delete',
        edit: '/organization/update',
        deleteBatch: '/organization/deleteBatch'
      },
      orgCategoryDisabled:false,
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    loadData() {
      this.refresh();
    },
    loadTree() {
      let that = this
      that.treeData = []
      that.categoryTree = []
      let params = {};
      params.id='1';
      queryQuoteCategoryTreeList(params).then((res) => {
        if (res) {
          //报价单分类全选后，再添加报价单分类，选中数量增多
          this.allTreeKeys = [];
          for (let i = 0; i < res.length; i++) {
            let temp = res[i]
            temp.key = temp.id;
            temp.value = temp.id;
            temp.title = temp.name;
            that.categoryTree.push(temp)
            // that.setThisExpandedKeys(temp)
            // that.getAllKeys(temp);
          }
          this.loading = false
        }
      })
    },
    refresh() {
      // console.log('调用refresh')
      this.loading = true
      this.onClearSelected()
      // 强制重新渲染 <a-tree>
      this.treeKey += 1;
      this.loadTree()
    },
    deleteCategory() {
      if (this.selectedKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
      } else {
        var that = this
        console.log(that.selectedKeys[0]);
        this.$confirm({
          title: '确认删除',
          content: '确定要删除所选中的 ' + this.selectedKeys.length + ' 条数据?',
          onOk: function () {
            postAction(that.url.delete, {id: that.selectedKeys[0]}).then((res) => {
              if (res.code == 200) {
                that.$message.success(res.data.message)
                that.loadTree()
                that.onClearSelected()
              } else {
                that.$message.warning(res.data.message)
              }
            })
          }
        })
      }
    },
    onSelect(selectedKeys, e) {
      // console.log('selected', selectedKeys, e)
      this.hiding = false
      let record = e.node.dataRef
      let params = {};
      params.id=record.id;
      // this.getTreeByParams(params)
      this.selectedKeys = [];
      this.selectedKeys.push(record.id)

      let that = this;
      queryQuoteCategoryInfo(params).then((res) => {
        if (res ) {
          record = res ;
          // that.currSelected = Object.assign({}, record)
          that.currSelected = record;
          that.model = this.currSelected
          // that.selectedKeys = [record.key]
          that.model.parentId = record.parentId
          console.log(that.currSelected)
          this.$refs.quoteTemplateTable.reloadList(record.id)
        }
      });
    },
    onClearSelected() {
      this.hiding = true
      this.checkedKeys = []
      this.currSelected = {}
      this.form.resetFields()
      this.selectedKeys = []
    },
    validateName(rule, value, callback){
      let params = {
        name: value,
        id: this.model.id?this.model.id:0
      };
      checkOrganization(params).then((res)=>{
        if(res && res.code===200) {
          if(!res.data.status){
            callback();
          } else {
            callback("名称已经存在");
          }
        } else {
          callback(res.data);
        }
      });
    },
    handleAdd() {
      this.$refs.quoteCategoryModal.add()
      this.$refs.quoteCategoryModal.title = '新增报价单分类'
    },
    handleEdit() {
      this.$refs.quoteCategoryModal.edit(this.currSelected)
      this.$refs.quoteCategoryModal.title = '编辑报价单分类'
    },

  },
  created() {
    this.currFlowId = this.$route.params.id
    this.currFlowName = this.$route.params.name
    // this.loadTree()
  },

}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin: 15px;
}

.anty-form-btn {
  width: 100%;
  text-align: center;
}

.anty-form-btn button {
  margin: 0 5px;
}

.anty-node-layout .ant-layout-header {
  padding-right: 0
}

.header {
  padding: 0 8px;
}

.header button {
  margin: 0 3px
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

#app .desktop {
  height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
  margin-left: 3px
}

.drawer-bootom-button {
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>